<template>
  <div class="flow-img">
    <a class="img-box"
      v-for="(item, index) in imgsArrC"
      :key="item.id"
      :style="{
        width: item.imgAttr.width + 'px',
        height: item.imgAttr.height + 'px',
        marginRight: item.imgAttr.marginRight + 'px',
        marginBottom: gap + 'px'
      }"
      @click="clickItem(item, index)">
      <div class="img-inner-box" v-lazy:backgroundImage="item.src">
        <div class="img-content">
          <slot name="content" :index="index" :value="item">
          </slot>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
import conf from './config'

export default {
  props: {
    imgsArr: {
      type: Array,
      default: []
    },
    gap: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      loadedCount: 0,
      isPreloading: false,
      imgsArrC: []
    }
  },
  created() {
    this.preload()
  },
  methods: {
    preload() {
      this.imgsArr.forEach((v, i) => {
        if (i < this.loadedCount) return
        var oImg = new Image()
        oImg.addEventListener('load', e => {
          this.loadFn(e, oImg, i)
        })
        oImg.addEventListener('error', e => {
          this.loadFn(e, oImg, i)
        })
        oImg.src = v.src
      })
    },
    loadFn(e, oImg, i) {
      this.loadedCount++
      if (e.type === 'load') {
        this.imgsArr[i].imgAttr = {
          width: oImg.width,
          height: oImg.height
        }
      } else {
        // 加载失败时，使用加载失败的图片
        this.imgsArr[i].imgAttr = {
          width: 150,
          height: 150
        }
      }
      if (this.loadedCount === this.imgsArr.length) {
        for (let index = 0; index < this.imgsArr.length; index++) {
          const item = this.imgsArr[index]
          if (
            index === 0 ||
            (index === this.imgsArr.length - 1 && this.imgsArr.length % 2 === 0)
          ) {
            // 第一张图/最后一张偶数图长屏显示
            item.imgAttr = {
              width: window.innerWidth,
              height: Math.min(
                conf.maxHeight,
                Math.max(
                  item.imgAttr.height / item.imgAttr.width * window.innerWidth,
                  conf.minHeight
                )
              )
            }
          } else {
            // 先分配宽度
            let width = 0
            let marginRight = 0
            let height = 0
            if (index % 2 === 1) {
              height = conf.height * (1 + Math.random() * 0.5)
              width = Math.min(
                conf.maxWidth,
                item.imgAttr.width / item.imgAttr.height * height
              )
              marginRight = this.gap
            } else {
              height = this.imgsArr[index - 1].imgAttr.height
              width =
                window.innerWidth -
                this.gap -
                this.imgsArr[index - 1].imgAttr.width
            }
            item.imgAttr = {
              width: width,
              height: height,
              marginRight: marginRight
            }
          }
        }
        this.imgsArrC = this.imgsArr.concat([])
        this.isPreloading = false
        // 预加载完毕
        this.$nextTick(() => {
          // this.initImgBoxEls()
          this.$emit('preloaded')
        })
      }
    },
    clickItem (item, index) {
      this.$emit('clickItem', item, index)
    }
  },
  watch: {
    imgsArr() {
      this.preload()
    }
  }
}
</script>

<style lang="stylus" scoped>
.flow-img
  display flex
  flex-wrap wrap
  .img-inner-box
    width 100%
    height 100%
    background-size cover
    background-repeat no-repeat
    background-position center
</style>
